<template>
  <view class="container">
		 <view class="header">  
		      <text :class="{ 'active': isActivityActive }" class="header-title" @click="toggleActivityActive">活动描述</text>  
		      <text :class="{ 'active': isClubActive }" class="header-subtitle" @click="toggleClubActive">俱乐部评价</text>  
		    </view>  
    <view class="content">
		  <view class="detail">
		
            <text class="detail-title">骑行领队：</text>
            <text class="detail-subtitle">布旅不停骑游团 阿伟</text>
          </view>
          <view class="detail">
            <text class="detail-title">集合地点：</text>
            <text class="detail-subtitle">{{datavalue.start}}</text>
          </view>
          <view class="detail">
            <text class="detail-title">集合时间：</text>
            <text class="detail-subtitle">{{datavalue.time}}</text>
          </view>
          <view class="detail">
            <text class="detail-title">骑行距离：</text>
            <text class="detail-subtitle">{{datavalue.distance}}公里</text>
          </view>
          <view class="detail">
            <text class="detail-title">骑行路线：</text>
            <text class="detail-subtitle">{{datavalue.startPlace}}——{{datavalue.lastPlace}}</text>
          </view>
          <view class="detail">
            <text class="detail-title">骑行强度：</text>
            <text class="detail-subtitle">{{datavalue.cyclingIntensity}}</text>
          </view>
          <view class="detail">
            <text class="detail-title">车型：</text>
            <text class="detail-subtitle">{{datavalue.recommendedEquipment}}</text>
          </view>
          <view class="detail">
            <text class="detail-title">彩蛋：</text>
            <text class="detail-subtitle">{{datavalue.easterEgg}}</text>
          </view>
		   <!-- <view class="detail">
		    <text class="detail-subtitle">请自觉购买户外运动伤害保险</text>
		    <text class="detail-subtitle">请适量饮酒(骑车限饮一杯)，骑酒不醉车</text>
			</view> -->
          <view class="detail">
            <text class="detail-title">额外福利：</text>
            <text class="detail-subtitle">{{datavalue.extraBenefits}}</text>
          </view>
		
		  <!-- mode="widthFix" -->
      <image class="activity-image" src="/static/yanhuo.png" ></image>
      <view class="info">
        <text class="tips">Tips: 2024-05-09 18:00 前可取消报名</text>
      </view>
      <button class="button" @click="skipCompleteinformation()">活动报名</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		isActivityActive: true,  
		isClubActive: false,
	  datavalue:{
		activityId: '', //活动id
	  	start : '北京工商管理专修学院',//集合地点
		pathId : '',//pathId
		time : '2024-05-09 18:00 ',//时间
		distance : '10',//距离
		startPlace : '北工商',//起始地点
		lastPlace : '故宫',//目的地
		cyclingIntensity : '专业',//骑行强度
		recommendedEquipment : '小娇',//车型
		easterEgg : '到达终点后，ootd被评选为最正式和最随意的2名骑友将获得Boskey House精酿',//彩蛋
		extraBenefits : '活动全程包含专业摄影师',//额外福利
	  },
	  datalist : {},//用于存储数据的数组
    };
  },
 onLoad() {
 	// var that = this;  
 	// 	//从registration页面跳转过来后取值。  
 	// 	uni.getStorage({  
  // 		key: 'detail',
  // 		success: function (res) {
  // 			console.log('读取成功');
		// 	//活动id
		// 	that.datavalue.activityId = res.data.activityId;
  // 			//集合地点
  // 			that.datavalue.start = res.data.location;
  // 			//pathId
		// 	that.datavalue.pathId = res.data.pathId;
		// 	//时间
		// 	that.datavalue.time = res.data.time;
		// 	//距离
		// 	that.datavalue.distance = res.data.distance;
			
		// 	that.SelectActivityPath(that.datavalue.pathId);
		// },
  // 		fail: function (err) {
  // 			console.log('读取失败：', err);
  // 		}
  // 	});

  },
  
  methods: {
    toggleActivityActive() {  
         this.isActivityActive = true;  
         this.isClubActive = false;  
       },  
       toggleClubActive() {  
         this.isActivityActive = false;  
         this.isClubActive = true;  
       }  ,
	// SelectActivityPath(pathId){
	// 		var that = this;
	// 		 this.$axios.post("/cyclingapplet/activityPath/selectActivityPath",{
	// 			pathId : pathId,
				
	// 		 }).then(function(response){
	// 			 that.datavalue.startPlace = response.data.data.startPlace;
	// 			 that.datavalue.lastPlace = response.data.data.lastPlace;
	// 			 that.datavalue.cyclingIntensity = response.data.data.cyclingIntensity;
	// 			 that.datavalue.recommendedEquipment = response.data.data.recommendedEquipment;
	// 			 that.datavalue.easterEgg = response.data.data.easterEgg;
	// 			 that.datavalue.extraBenefits = response.data.data.extraBenefits;
	// 			 //that.datalist = response.data;
	// 				}).catch(function(error) {
	// 					console.log("==error==============");
	// 					console.log(error);
	// 				})
	// },
	//跳转到Completeinformation页面
	skipCompleteinformation(){
		var that = this;
		//存值
	//	uni.setStorage({  
	//		key: 'Completeinformation',  
	//		data: that.datavalue.activityId,  
	//		success: function () {  
	//			// 存值成功后进行页面跳转  
				uni.navigateTo({  
					url: '/pages/Completeinformation/Completeinformation',  
					success: function(){  
						console.log('跳转成功');  
					}  
				});  
	//		},  
	//		fail: function (err) {  
	//			console.log('存储失败：', err);  
	//		},  
	//	});  
		 
	}
  }
};
</script>
<style>
.container {
  width: 90%;
  height: 100%;
  max-width: 90%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  padding: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #3CB371;
  border-radius: 10px;
} 

.header-title.active, .header-subtitle.active {  
  font-weight: bold;  
  color: #3CB371;  
}  
.header-title {
  font-size: 14px;
  color: #fff;
}

.header-subtitle {
  font-size: 14px;
  color: #fff;
}

.content {
  padding: 10px;
}

.info {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.activity-image {
  width: 90%; 
  max-width: 90%;
  border-radius: 10px;
  margin-top: 10px;
}

.tips {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
  margin: 0 auto;
}

.button {
background-color: #3CB371;  
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  text-align: center;
  width: 80%; 
  max-width: 80%;
  margin: 0 auto;
}

.detail {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.detail-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.detail-subtitle {
  font-size: 14px;
  color: #666;
  margin-left: 10px;
}
</style>